<template>
    <MapContent
        @mapInitSuccess="mapInitSuccess"
        :mapId="mapId"
        :center="centerPos"
    >
        <template v-slot:map_tools>
            <MapTools
                ref="RefChild"
                v-if="isMapInitSuccess"
                :isShowTools="isShowTools"
                :toolsList="toolsList"
                :mapInit="mapInit"
            >
                <template v-slot:map_tools_item="{ item }">
                    <mapToolsItem
                        v-if="item?.show"
                        :item="item"
                        @changeLayer="changeLayer"
                        @queryToolsUserTraJectory="queryToolsUserTraJectory"
                    >
                    </mapToolsItem>
                </template>
            </MapTools>
        </template>
    </MapContent>
</template>

<script setup lang="ts">
import { toolsList } from "@/components/map/map";
import type { centerType } from "@/components/map/map";
import { relatedMarkHooks } from "@/components/map/hooks/relatedMarkHooks";

import centerIcon from "@/assets/images/map_center.png";
let centerMarker = ref(); // 地图中心mark
let centerPos = ref(["", ""] as centerType); // 地图中心mark

const isShowTools = ref(true); // 弹窗是否显示
let mapId = ref("map");
let mapInit: any = ref(null);
let isMapInitSuccess: any = ref(false);

const RefChild = ref();

// 设置地图中心mark
const seterCenterMark = (center: centerType = ["113.336685", "22.997442"]) => {
    centerPos.value = center;
    centerMarker = relatedMarkHooks(mapInit).crteatMark(centerIcon, center);
    mapInit.map.add(centerMarker);
};

// 切换图层
const changeLayer = (item: any) => {
    RefChild.value.changeLayer(item.ele.text);
};

// 查询用户轨迹
const queryToolsUserTraJectory = (item: any) => {
    RefChild.value.queryToolsUserTraJectory(item);
};

// 地图初始话完成
const mapInitSuccess = (value: any) => {
    mapInit = value;
    isMapInitSuccess.value = true;

    // 设置地图中心
    seterCenterMark();
};
onMounted(() => {});
</script>
<style></style>
